<template>
  <div class="finance-goods-sale">
    <div class="s-header">
      <div class="h-left">
        <span>选择日期</span>
        <n-date-picker style="width:450px" type="daterange" clearable />
        <button class="h-left_btn h-left_btn--reset">重置</button>
      </div>
      <div class="h-right">
        <span>合计金额：￥423423</span>
        <span>合计数量：4324</span>
      </div>
    </div>
    <div class="s-list">
      <n-data-table bordered :columns="columns" :data="list" striped :scroll-x="1800" :max-height="'39.5vh'" />
    </div>
    <div class="s-footer">
      <n-pagination v-model:page="page" :page-count="100" :page-slot="7">
        <template #prev>
          上一页
        </template>
        <template #next>
          下一页
        </template>
        <template #suffix>
          <div class="pagination__jump-page">
            到<input type="number">页
            <button>确定</button>
            <span>10 条 / 页</span>
          </div>
        </template>
      </n-pagination>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const columns = [
  { title: '名称/款号', key: 'name', },
  { title: '产品库存', key: 'age' },
  { title: '产品类型', key: 'address' },
];
const list = reactive([{
  key: 0,
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park'
}
])
</script>

<style lang="less">
.finance-goods-sale {
  display: flex;
  flex-direction: column;
  height: 100%;
  .s-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    .h-left {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      span {
        margin-right: 10px;
        font-size: 26px;
        font-weight: 500;
        color: #2e323d;
      }
      &_btn {
        width: 114px;
        height: 60px;
        font-size: 26px;
        text-align: center;
        line-height: 60px;
        border-radius: 5px;
        &--reset {
          margin-left: 20px;
          color: #4a5060;
          background: #f8f8f8;
          border: 1px solid #aaa;
        }
      }
    }
    .h-right {
      > span {
        font-size: 28px;
        font-weight: bold;
        color: #4a5060;
        &:nth-child(2) {
          margin-left: 60px;
        }
      }
    }
  }
  .s-list {
    flex: 1;
    padding:0 30px;
  }
  .s-footer {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 128px;
    box-sizing: border-box;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
    .pagination__jump-page {
      font-size: 26px;
      color: #4a5060;
      margin: 0 18px;

      input {
        margin: 0 15px;
        width: 64px;
        height: 42px;
        text-align: center;
        background: #f8f8f8;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
      }

      button {
        margin: 0 30px;
        width: 88px;
        height: 44px;
        color: #fdfdfd;
        background: #2c8cf0;
        border-radius: 5px;
      }
    }
  }
}
</style>